<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<div class="white-bg">
	<div align="center">
		<div class="main-content">
			<form id="form-menu-edit">
				<input id="menuId" name="menuId" type="hidden"/>
				<input id="treeId2" name="parentId" type="hidden"/>
				<table class="table table-striped table-bordered table-td">
			        <tbody>
			        	<tr>
		                	<td>
			                	<label>上级菜单：</label>
			                </td>
			                <td>
				        		<div class="input-group">
								    <input class="form-control" type="text" onclick="selectMenuTree()" id="treeName" readonly="true" th:value="${menu.parentName == null ? '无' : menu.parentName}">
							        <span class="input-group-addon"><i class="fa fa-search"></i></span>
							    </div>
			                </td>
			                <td>
			                	<label class="is-required">菜单类型：</label>
		                	</td>
			                <td>
			                	<label class="radio-box"> <input type="radio" name="menuType" value="M" /> 目录 </label> 
								<label class="radio-box"> <input type="radio" name="menuType" value="C" /> 菜单 </label> 
								<label class="radio-box"> <input type="radio" name="menuType" value="F" /> 按钮 </label>
			                </td>
			            </tr>
			            <tr>
		                	<td>
			                	<label class="is-required">菜单名称：</label>
			                </td>
			                <td>
			                	<input id="menuName" name="menuName" class="easyui-textbox" style="width:250px;" data-options="prompt:'请输入菜单名称',validType:['length[1,30]'],required:true" type="text">
			                </td>
			                 <td>
			                	<label class="is-required">显示顺序：</label>
		                	</td>
			                <td>
	                	 		<input id="orderNum" name="orderNum" class="easyui-numberbox" style="width:250px;" data-options="prompt:'请输入显示顺序',min:1,required:true" type="text">
			                </td>
			            </tr> 
			            <tr id="url_tr">
			            	<td>
			                	<label>请求地址：</label>
			                </td>
			                <td colspan="3">
			                	<input id="url" name="url" class="easyui-textbox" value="#" style="width:650px;" data-options="prompt:'请输入请求地址',validType:['maxLength[130]']" type="text">
			                </td>
			            </tr>
			            <tr id="perms_tr">
		                	<td>
			                	<label>权限标识：</label>
			                </td>
			                <td colspan="3">
			                	<input id="perms" name="perms" class="easyui-textbox" style="width:650px;" data-options="prompt:'请输入权限标识',validType:['maxLength[130]']" type="text">
								<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
			                </td>
			            </tr> 
			            <tr id="target_tr">
			                <td>
			                	<label class="is-required">打开方式：</label>
			                </td>
			                <td colspan="3">
	                			<select id="target" name="target" style="width: 150px;" class="easyui-combobox"  data-options="editable:false,panelHeight:100">
				                    <option value="menuItem">页签</option>
				                    <option value="menuBlank">新窗口</option>
				                </select>
			                </td>
		                </tr>
		                <tr id="icon_visible_tr">
			                <td>
			                	<label class="is-required">菜单状态：</label>
			                </td>
			                <td>
			                	<select id="visible" name="visible" class="easyui-combobox" style="width: 150px;" data-options="editable:false,panelHeight:100" th:with="type=${@dict.getType('sys_show_hide')}">
	                    			<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
	                			</select>
			                </td>
			                <td>
			                	<label>图标：</label>
		                	</td>
			                <td>
			                	<input id="icon" name="icon" class="easyui-textbox" style="width:250px;" data-options="prompt:'请输入图标',validType:['maxLength[130]']" type="text">
			                </td>
		                </tr>
		                <tr>
			                <td>
			                	<label>备注：</label>
		                	</td>
			                <td colspan="3">
	                	 		<input class="easyui-textbox" name="remark" data-options="prompt:'请输入备注',validType:['maxLength[100]'],multiline:true" style="height:80px;width:650px;">
			                </td>
			            </tr>
				 	</tbody>
			    </table>
		    </form>
		</div>
	</div>
</div>
<script th:inline="javascript">
	var menu = [[${menu}]];
	$('#form-menu-edit').form('load', menu);
	$(function() {
		menuVisible(menu.menuType);
		$('.radio-box [type="radio"]').each(function(index, element) {
			$(this).click(function(){
				if(this.value == "M"){
					$("#url_tr").hide();
		            $("#perms_tr").hide();
		            $("#icon_visible_tr").show();
		            $("#target_tr").hide();
		            //清空
		            $("#url").textbox("setValue", "#");
		            $("#perms").textbox("setValue", "");
				} else if(this.value == "C"){
					$("#url_tr").show();
		            $("#perms_tr").show();
		            $("#icon_visible_tr").show();
		            $("#target_tr").show();
				} else if(this.value == "F"){
					$("#url_tr").hide();
		            $("#perms_tr").show();
		            $("#icon_visible_tr").hide();
		            $("#target_tr").hide();
		            //清空
		            $("#url").textbox("setValue", "#");
		            $("#icon").textbox("setValue", "");
				}
	    	});
		});
	});
	function menuVisible(menuType) {
        if (menuType == "M") {
        	$("#url_tr").hide();
            $("#perms_tr").hide();
            $("#icon_visible_tr").show();
            $("#target_tr").hide();
        } else if (menuType == "C") {
        	$("#url_tr").show();
            $("#perms_tr").show();
            $("#icon_visible_tr").show();
            $("#target_tr").show();
        } else if (menuType == "F") {
        	$("#url_tr").hide();
            $("#perms_tr").show();
            $("#icon_visible_tr").hide();
            $("#target_tr").hide();
        }
    }
	
	$("#menuName").textbox({
		onChange: function (newValue, oldValue) {
			if($.common.trim(newValue) != $.common.trim(oldValue)){
				var url = prefix + "/checkMenuNameUnique";
				var queryParams = {
					"menuId" : $("#menuId").val(),
					"parentId" : $("#treeId2").val(),
					"menuName" : $.common.trim(newValue)
				};
				$.easyUIOperate.ajax(url, "post", "json", queryParams, function(result){
					if(!$.validate.unique(result)){
						$("#menuName").textbox("setValue","").textbox("textbox").focus();
						$.messager.show({
							title : '提示',
							msg : "该菜单已经存在！",
							timeout: 1000
						});
					}
				});
			}
		}
	});
	 /*菜单管理-新增-选择菜单树*/
    function selectMenuTree() {
    	var menuId = $("#treeId2").val();
    	if(menuId > 0) {
    		var url = prefix + "/selectMenuTree/" + menuId;
    		// 皮肤缓存
        	var skin = storage.get("skin");
        	var panelWindowTheme = "";
        	var panelWindowHeaderTheme = "";
        	var panelWindowBodyTheme = "";
        	// 本地主题优先，未设置取系统配置
        	if($.common.isNotEmpty(skin)){
        		panelWindowTheme = "easyui-window-" + skin.split('|')[0];
        		panelWindowHeaderTheme = "easyui-window-header-" + skin.split('|')[0];
        		panelWindowBodyTheme = "easyui-window-body-" + skin.split('|')[0];
        	}
        	var dialogObj = $('<div id="selectMenuTreeDialog" style="overflow-x:hidden;"/>');
        	dialogObj.dialog({
        		href: url,
    			width : 350,
    			height : ($(window).height() - 150),
    			modal : true,
    			maximizable: true,
    			title : "菜单选择",
    			buttons : [ {
    				text : '提交',
    				iconCls : 'icon-save',
    				handler : function() {
    					var treeId = $("#treeId").val();
    					var treeName = $("#treeName").val();
    		    		if($.common.isEmpty(treeName)){
    		    			$.messager.alert("提示", "请选择菜单！", 'warning');
    		    			return false;
    		    		}
    		    		$("#treeId2").val(treeId);
    				    $("#treeName2").val(treeName);
    		    		dialogObj.dialog('destroy');
    				}
    			},{
    				text : '关闭',
    				iconCls : 'icon-cancel',
    				handler : function() {
    					dialogObj.dialog('destroy');
    				}
    			} ],
    			onOpen : function(){
    				$("#selectMenuTreeDialog").parents(".window").addClass(panelWindowTheme);
    				$("#selectMenuTreeDialog").addClass(panelWindowBodyTheme);
    				$("#selectMenuTreeDialog").siblings(".window-header").find(".panel-title").addClass(panelWindowHeaderTheme);
    			},
    			onClose : function() {
    				dialogObj.dialog('destroy');
    			}
    		});
    	} else {
    		$.messager.alert("提示", "主菜单不能选择！", 'warning');
			return false;
    	}
	}
</script>